<template>
  <view>
    <image class="bg1" src="@/static/tab/5.png" mode="widthFix"></image>
    <view class="top">
      <p>订单报价为</p>
      <span>{{ form.totalPrice ? form.totalPrice : "" }}</span>
      <b v-if="!zhongwen(form.totalPrice)">元/吨</b>
      <i>报价时间：{{ form.quotationDate ? form.quotationDate : "" }}</i>
    </view>
    <view class="boxs">

      <view class="title">产品信息</view>
      <view class="common-form-card">
        <u-form>
          <u-form-item label="成分1" label-width="100">
            <div class="area">{{ form.drugName1 }}</div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              {{ form.netContent1 }}<view class="tr">%</view>
            </div>
          </u-form-item>

          <u-form-item label="剂型" label-width="100">
            <div class="area">{{ form.dosageName }}</div>
          </u-form-item>

          <u-form-item label="特殊指标要求" label-width="100" v-if="form.specialIndicatorRequirements">
            <div class="area">{{ form.specialIndicatorRequirements }}</div>
          </u-form-item>
          <u-form-item label="订单总量" label-width="100">
            <view class="area"
              >{{ form.totalAmount }}<view class="tr">公斤</view></view
            >
          </u-form-item>
        </u-form>
      </view>
      <view class="common-form-card common-form-card2">
        <u-form>
          <u-form-item label="成分2" label-width="100">
            <div class="area">{{ form.drugName2 }}</div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              {{ form.netContent2 }}<view class="tr">%</view>
            </div>
          </u-form-item>
        </u-form>
      </view>

      <view class="common-form-card common-form-card2">
        <u-form>
          <u-form-item label="成分3" label-width="100">
            <div class="area">{{ form.drugName3 }}</div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              {{ form.netContent3 }}<view class="tr">%</view>
            </div>
          </u-form-item>
        </u-form>
      </view>

      <view class="title">包装要求</view>
      <view class="common-form-card">
        <u-form>
          <u-form-item label="每个彩印铝箔袋容量" label-width="300">
            <div class="area">
              {{ form.foilBagCapacity }}
              <!-- <view class="tr">ML</view> -->
            </div>
          </u-form-item>

          <u-form-item label="每箱装袋数" label-width="100">
            <div class="area">{{ form.bagsPerBox }}</div>
          </u-form-item>

          <u-form-item label="每袋加说明" label-width="100">
            <div class="area">{{ form.ifInstructions == 1 ? "是" : "否" }}</div>
          </u-form-item>

          <u-form-item label="N袋装一个彩印铝箔袋" label-width="200">
            <div class="area">{{ form.bagsPerColorMediumBox }}</div>
          </u-form-item>
          <u-form-item label="特殊形状材质" label-width="100" v-if="form.specialBottle">
            <div class="area">{{ form.specialBottle }}</div>
          </u-form-item>
        </u-form>
      </view>

      <view class="box_height_20"></view>
    </view>
  </view>
</template>

<script>
// 配置信息
// 配置信息
import { detail } from "@/config/api.js";
import config from "../../libs/config/config.js";
export default {
  computed: {},
  data() {
    return {
      price: 236,
      time: "2024.10.18",
      tfList: ["是", "否"], // 省份列表
      provinceList: ["碳酸钙", "氯化钠"], // 省份列表
      cityList: "", // 城市列表
      areaList: [], // 区县列表
      index: 0, // 当前选择的省份索引
      cityIndex: 0, // 当前选择的城市索引
      areaIndex: 0, // 当前选择的区县索引
      allData: [], // 所有省市区数据
      fileList1: [],
      fileList2: [],
      ok: false,
      showType: false,

      showDate: false,
      showValidityBeginDate: false,
      showValidityEndDate: false,
      form: {
        totalPrice: "",
        quotationDate: "",
        dosageName: "",
        specialIndicatorRequirements: "",
        totalAmount: 0,
        drugName1: "",
        netContent1: 0,
        drugName2: "",
        netContent2: 0,
        drugName3: "",
        netContent3: 0,
        foilBagCapacity: "",
        bagsPerBox: 0,
        ifInstructions: 0,
        bagsPerColorMediumBox: 0,
        specialBottle: "",
      },
      selectList: [],
    };
  },
  onLoad(e) {
    // this._getDict();
    // if (e.id && e.id != "undefined") {
    //   this.form.id = e.id;
    // }

    console.log(111133331);
    this.getdetail(e.id);
  },

  methods: {
	  zhongwen(str) { // 匹配中文字符的正则表达式
	  	const reg = /[\u4e00-\u9fa5]/;
	  	return reg.test(str);
	  },
    async getdetail(e) {
      console.log(11111);

      await detail(e).then((res) => {
        console.log(res);
        this.form = res;
      });
    },
    switch1Change: function (e) {
      if (this.form.defaultFlag == 0) {
        this.form.defaultFlag = 1;
      } else {
        this.form.defaultFlag = 0;
      }
      console.log("switch1 发生 change 事件，携带值为", e.detail.value);
    },
    bindPickerChange(e) {
      console.log(e.detail.value);

      this.cityList = this.provinceList[e.detail.value];
      console.log(this.provinceList[e.detail.value]);
      // this.form.receiptProvince = this.provinceList[e.detail.value].id;
      // this.cityList = this.findChildrenById(
      //   this.form.receiptProvince,
      //   this.allData
      // );
      // this.index = e.detail.value;
      // this.cityIndex = 0;
      // this.areaIndex = 0;
      // this.areaList = [];
    },
    bindCityChange(e) {
      this.form.receiptCity = this.cityList[e.detail.value].id;
      this.areaList = this.findChildrenById(
        this.form.receiptCity,
        this.cityList
      );
      this.cityIndex = e.detail.value;
      this.areaIndex = 0;
    },
    bindAreaChange(e) {
      this.areaIndex = e.detail.value;
      this.form.receiptDistrict = this.areaList[e.detail.value].id;
    },
    findChildrenById(id, list) {
      for (let item of list) {
        if (item.id === id && item.children.length > 0) {
          return item.children;
        }
      }
      return [];
    },
    async _getDict() {
      await areaTree().then((res) => {
        // 使用 .map() 方法转换数组
        // const transformedArray = res.map((item) => ({
        //   label: item.contractName,
        //   value: item.id,
        // }));

        this.allData = res;
        this.provinceList = this.allData;
        console.log(this.provinceList);

        if (this.form.id) {
          this._getInfo();
        }
      });
    },
    findItemById(id, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          return i;
        }
      }
      return -1; // 如果未找到，返回-1
    },

    _getInfo() {
      addressInfo(this.form.id).then((res) => {
        console.log(res, this.selectList);
        if (res) {
          let temp = res;

          this.cityList = this.findChildrenById(
            res.receiptProvince,
            this.provinceList
          );
          this.index = this.findItemById(
            res.receiptProvince,
            this.provinceList
          );

          this.areaList = this.findChildrenById(res.receiptCity, this.cityList);
          this.cityIndex = this.findItemById(res.receiptCity, this.cityList);

          console.log(this.areaList, this.cityIndex);

          this.form = temp;
        }
      });
    },

    go(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 删除图片
    deletePic2(event) {
      this.fileList2.splice(event.index, 1);
    },
    // 新增图片
    async afterRead2(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.fileList2.length;
      lists.map((item) => {
        this.fileList2.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this.fileList2[fileListLen];
        this.fileList2.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },

    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: uni.getStorageSync("baseURL") + "/infra/file/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: "Bearer " + uni.getStorageSync("loginTokens"),
          },
          success: (res) => {
            setTimeout(() => {
              let jsonString = res.data;
              let jsonObject = JSON.parse(jsonString);
              resolve(jsonObject.data);
            }, 1000);
          },
        });
      });
    },
    confirmType(e) {
      this.showType = false;
      this.form.contractId = e.value[0].value;
      this.form.contractName = e.value[0].label;
    },

    changeNum() {
      this.form.prices = (this.form.kg * 22).toFixed(2);
    },
    submit() {
      console.log(this.fileList2);

      if (this.form.id) {
        addressUpdate(this.form).then((res) => {
          console.log(res);
          if (res) {
            uni.$u.toast("修改成功");

            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
      } else {
        addressCreate(this.form).then((res) => {
          console.log(res);
          if (res) {
            uni.$u.toast("提交成功");

            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
page {
  background: #ffffff;
}
</style>
<style scoped lang="scss">
page {
  background: #ffffff;
}
.top {
  width: 100%;
  height: auto;
  display: block;
  margin: 100rpx 0 0;
  position: relative;
  z-index: 2;
}
.top p {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 36rpx;
  color: #1c2023;
}
.top span {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 50rpx;
  font-weight: bold;
  color: #ee5e5e;
  margin: 30rpx 0 0rpx;
  box-sizing: border-box;
  padding: 0 50rpx;
}
.top b {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 36rpx;
  color: #1c2023;
  font-style: normal;
  margin: 0 0 0;
}
.top i {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 36rpx;
  color: #49b9ad;
  font-style: normal;  margin:30rpx 0 0 ;
}

.bg1 {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
.tr {
  display: block;
  float: right;
  color: #787879;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.line {
  height: 45px;
  font-weight: bolder;
  font-size: 32rpx;
}
.line_line {
  height: 45px;
  border-bottom: 1px solid #eee;
}
.noi {
  width: 342rpx;
  height: auto;
  display: block;
  float: left;
  margin: 340rpx 204rpx 50rpx;
}
.not {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 30rpx;
  color: #414141;
}
::v-deep .u-form-item {
  border-bottom: 1px solid #e9e9e9;
}
::v-deep .u-form-item:last-child {
  border: 0;
}
::v-deep .u-form-item__body__left__content__label {
  span {
    color: #1c2023;
    font-size: 28rpx;
  }
}
.common-form-card {
  margin: 0 0 15rpx;
  width: 690rpx;
  display: block;
  float: left;
  border-radius: 0;
  box-shadow: none;
  background: none !important;
}
.select {
  width: 100%;
  float: right;
  text-align: right;
  color: #c0c4cc;
  font-size: 15px;
}
.select .active {
  color: #303133;
}
.upload_box {
  float: right;
  text-align: right;
  align-items: flex-end;
}
.area {
  float: right;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: #1c2023;
  font-size: 28rpx;
  position: relative;
  z-index: 3;
}
.picker {
  margin: 0 0 5rpx;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10rpx;
}
.pickerno {
  color: rgb(192, 196, 204);
  font-size: 28rpx;
}
.title {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  padding: 25rpx 0 25rpx 25rpx;
  box-sizing: border-box;
  font-size: 36rpx;
  color: #49b9ad;
}
.boxs {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  position: relative;
  z-index: 3;
  margin: 0 0 50rpx;
  padding-bottom: 100rpx;
}
.df_1 {
  background: #49b9ad;
  color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 20rpx;
  width: 700rpx;
  margin: 60rpx 25rpx 100rpx;
  padding: 0;
  float: left;
}
::v-deep .u-button--primary {
  background: none !important;
  border: 0;
  width: 100% !important;
  padding: 0 !important;
}
.common-form-card2 {
  margin: 30rpx 0 0 0;
}
</style>
